<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	template="/resources/layout/templateInterno.xhtml"
	xmlns:t="http://myfaces.apache.org/tomahawk"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:fmt="http://java.sun.com/jstl/fmt"
    xmlns:rich="http://richfaces.org/rich">
    
 
<ui:define name="body">



<body>
	<h:form id="form">
  
  
  </h:form>
<script>

jQuery(document).ready(function(){
	
	jQuery("#mdAddCompromisso\\:inptHoraInicio").mask("99:99");
	jQuery("#mdAddCompromisso\\:inptHoraFim").mask("99:99");

	
	
	 });

		JQuery(document).ready(function() {
		
			
		
		});

	function dados() {
		var $f = jQuery.noConflict(); 
		
		
		//alert("b:" + b);
	
		};


	function calendar(d){
		var $j = jQuery.noConflict(); 

		var a = d;

		  
	}


</script>

	    <style>
        .tooltip {
            background-color:#{richSkin.generalBackgroundColor};
            border-width:3px;
            padding:10px;
        }
        .tooltip-text {
            width:350px;
            height:80px;
            cursor:arrow;
            border-width:2px;
            text-align:center;
            display: table-cell;
            vertical-align: middle; 
        }
        .tooltipData {
            font-weight: bold;
        }
        
        .cellExisteCompromisso {
            font-weight: bold;
            background-color: #FFCCCC;
        }
    </style>



<h:form id="formTest">

</h:form>
</body>	


	
		<h:form id="agendaForm"  styleClass="form">
		<div class="field-clear"></div>
		<h:panelGroup id="pgCalendar" layout="block" style="width: 300px">
		 <a4j:jsFunction name="ajaxSubmit" oncomplete="#{rich:component('panel')}.show()" reRender="editContent" />
			                  
		  <a4j:jsFunction id="obtemDiaCarCompr" name="obterDiaCarregarCompromisso" action="#{calendarDataModel.carregarCompromisso}" reRender="panelCompromissoCorrente" >
			 <a4j:actionparam name="param2" assignTo="#{calendarDataModel.diaSelecionado}"  />                 
		 </a4j:jsFunction>
		 
		 <a4j:jsFunction id="obtemDia" name="obterDia" action="#{calendarDataModel.exibirCompromisso}" reRender="panelCompromissoCorrente" >
			 <a4j:actionparam name="param1" assignTo="#{calendarDataModel.dados}"  />                  
		 </a4j:jsFunction>
		 <a4j:jsFunction id="nextDate" name="obterDataAlterada"  reRender="organizer,sample3" action="#{calendarDataModel.recarregarCalendario}"  >
		 </a4j:jsFunction>
			<rich:calendar id="organizer"
				 popup="false"
				value="#{agendaBean.selectedDate}"
				 showApplyButton="true"
				cellWidth="80px" 
				cellHeight="60px" 
				boundaryDatesMode="none"
				ondatemouseover="obterDia(this.textContent);"
				showWeeksBar="false"
				dataModel="#{calendarDataModel}"
				oncurrentdateselected="obterDataAlterada()"				
				firstWeekDay="0" 
				todayControlMode="hidden"
				minDaysInFirstWeek="2"
				ondateselect="obterDiaCarregarCompromisso(this.textContent);"
				onchanged="if (event.rich.date) {ajaxSubmit();}"
				valueChangeListener="#{calendarDataModel.valueChanged}" >
				
			 <a4j:outputPanel  layout="block" id="cell"  onclick="#{rich:component('organizer')}.resetSelectedDate()" style="height: 100%;" styleClass="organizer-cell">
                <div>
                     <h:outputText id="c"  value="{day}" style="align:center"/>
                </div>
				<div>&#xA0;</div>
                <div>
                
						 <h:outputText value="{data.adicionar}" style="align:center"/>
                    
                </div>
              
            </a4j:outputPanel>
			</rich:calendar>
			 <h:panelGroup id="sample3" styleClass="tooltip-text"  >
				<rich:toolTip   id="toolTipCompromisso" for="organizer" followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
		        	<span  style="white-space:nowrap">
		        		 <h:panelGroup id="panelCompromissoCorrente">
		          			  <rich:dataTable rendered="#{calendarDataModel.exibirToolTip eq 'EC'}" style="width: 500px;" id="tbCompromisso"  var="compromisso" value="#{calendarDataModel.listaCompromisso}" >
				 				 <f:facet  name="header">
				                    <rich:columnGroup >
				                            <rich:column style="text-align: left"  styleClass="ui-state-default" >
				                                <strong><h:outputText value="Titulo" /></strong>
				                            </rich:column>
				                            <rich:column style="text-align: left" styleClass="ui-state-default" >
				                                <strong><h:outputText value="Hora Início" /></strong>
				                            </rich:column>
				                            <rich:column style="text-align: left" styleClass="ui-state-default" >
				                                <strong><h:outputText value="Hora Fim" /></strong>
				                            </rich:column>
				                    	</rich:columnGroup>
				                  </f:facet>
				 				<rich:columnGroup >				
									<rich:column >
										<h:outputText value="#{compromisso.titulo}" />
									</rich:column>
									 <rich:column>
										<h:outputText value="#{compromisso.horaInicio}" />
									</rich:column>	
									 <rich:column>
										<h:outputText value="#{compromisso.horaFim}" />
									</rich:column>	
								</rich:columnGroup>
								</rich:dataTable>
								
								<h:panelGroup rendered="#{calendarDataModel.exibirToolTip eq 'AC'}" >
									<div class="grid-6-12">
										Adicione um novo compromisso.
									</div>
								</h:panelGroup>
									<h:panelGroup rendered="#{calendarDataModel.exibirToolTip eq 'ND'}" >
									<div class="grid-6-12">
										Não disponível.
									</div>
								</h:panelGroup>
							</h:panelGroup>
						</span>
					</rich:toolTip>
				</h:panelGroup>
			</h:panelGroup>
			 
		</h:form>
		<rich:modalPanel id="panel" width="700" height="500" resizeable="false">
			<f:facet name="header">Cadastrar Compromisso:</f:facet>
			<f:facet name="controls">
				<h:panelGroup>
					<h:graphicImage value="/images/modal/close.png" id="hidelink"
						styleClass="hidelink" />
					<rich:componentControl for="panel" attachTo="hidelink"
						operation="hide" event="onclick" />
				</h:panelGroup>
			</f:facet>
			<h:form id="mdAddCompromisso">
				<h:panelGroup style="width:400px" id="editContent">
					<h:panelGroup id="pgMensagemCompromisso">
						<div class="grid-5-12">
						  <h:messages id="msCompromisso" style="color : red;padding-left : 8px" />
						</div>
					</h:panelGroup>
					<div class="field-clear"></div>
					<div class="grid-8-12">
						<h:outputLabel id="lbTitulo"	class="form-lbl" value="Título:" /> 
						<h:inputText id="inptTitulo"  styleClass="form-txt" value="#{calendarDataModel.agenda.titulo}" />
					</div>
					<div class="field-clear"></div>
					<div class="grid-6-12">
						<h:outputLabel id="lbTipoCompromisso" class="form-lbl" value="Tipo Compromisso:" /> 
						<h:selectOneMenu id="cbTipoCompromisso" required="true" requiredMessage="Favor informar o Tipo" styleClass="form-select"
							value="#{calendarDataModel.agenda.tipo}">
							<f:selectItem itemLabel="Selecione ..." itemValue="" />
							<f:selectItem itemLabel="Privado" itemValue="PR" />
							<f:selectItem itemLabel="Público" itemValue="PB" />
						</h:selectOneMenu>
					</div>
					<div class="field-clear"></div>
					<div class="grid-4-12">
						<h:outputLabel id="lbDataCompromisso" class="form-lbl" value="Dat. Compromisso" />
						 <rich:calendar id="clDataCompromisso" 
						 				firstWeekDay="0" 
						 				minDaysInFirstWeek="2" 
						 				value="#{calendarDataModel.agenda.data}"
										datePattern="dd/MM/yyyy" inputSize="10" inputClass="maskDate" enableManualInput="true" disabled="false">
						</rich:calendar> 
						<rich:jQuery id="mskDateCompromisso" selector=".maskDate" timing="onload" query="mask('99/99/9999',{placeholder:' '})" />
					</div>
					<div class="grid-3-12">
						<h:outputLabel id="lbHoraInicio" class="form-lbl" value="Hora Início:" /> 
						<h:inputText id="inptHoraInicio" maxlength="5"  style="width: 40px" styleClass="form-txt" 	value="#{calendarDataModel.agenda.horaInicio}" />
					</div>
					<div class="grid-4-12"> 
						<h:outputLabel id="lbHoraFim" class="form-lbl" value="Hora Fim:" /> 
						<h:inputText id="inptHoraFim" maxlength="5" style="width: 40px" styleClass="form-txt" value="#{calendarDataModel.agenda.horaFim}" />
					</div>
					<div class="field-clear"></div>
					<div class="grid-12-12">
						<h:outputLabel id="lbDescricao" class="form-lbl" value="Descrição:" />
						 <h:inputTextarea styleClass="form-txt" value="#{calendarDataModel.agenda.descricao}" />
					</div>
					<div class="grid-12-12">
						<a4j:commandButton value="Add" action="#{calendarDataModel.adicionarCompromisso}" id="btAddCompromisso"
							reRender="pgMensagemCompromisso, panelCompromissoCadastrado,editContent" />
					</div>
				</h:panelGroup>
				<div class="grid-3-12">
				 <a4j:outputPanel id="panelCompromissoCadastrado" ajaxRendered="true"> 
					 <rich:dataTable style="width: 600px; border:1px" id="tbCompromisso"  var="compromisso" value="#{calendarDataModel.listaCompromisso}" >
					  <f:facet  name="header">
				                    <rich:columnGroup >
				                            <rich:column style="text-align: left"  styleClass="ui-state-default" >
				                                <strong><h:outputText value="Título" /></strong>
				                            </rich:column>
				                            <rich:column style="text-align: left" styleClass="ui-state-default" >
				                                <strong><h:outputText value="Hora Início" /></strong>
				                            </rich:column>
				                            <rich:column style="text-align: left" styleClass="ui-state-default" >
				                                <strong><h:outputText value="Hora Fim" /></strong>
				                            </rich:column>
				                            <rich:column style="text-align: left" styleClass="ui-state-default" >
				                                <strong><h:outputText value="Operações" /></strong>
				                            </rich:column>
				                    	</rich:columnGroup>
				                  </f:facet>
				 				<rich:columnGroup >				
									<rich:column >
										<h:outputText value="#{compromisso.titulo}" />
									</rich:column>
									 <rich:column>
										<h:outputText value="#{compromisso.horaInicio}" />
									</rich:column>	
									 <rich:column>
										<h:outputText value="#{compromisso.horaFim}" />
									</rich:column>
									 <rich:column>	
										<a4j:commandLink id="removerCompromisso" ajaxSingle="true" value="x" action="#{calendarDataModel.removerCompromisso}" reRender="tbCompromisso,pgMensagemCompromisso"  >
									 		<f:setPropertyActionListener target="#{calendarDataModel.compromissoSelecionado}" value="#{compromisso}"/> 
									 	</a4j:commandLink>
									 	-
									 	<a4j:commandLink id="editarCompromisso" ajaxSingle="true" value="Edit" action="#{calendarDataModel.editarCompromisso}" reRender="editContent"  >
									 		<f:setPropertyActionListener target="#{calendarDataModel.compromissoSelecionado}" value="#{compromisso}"/> 
									 	</a4j:commandLink>
									 </rich:column> 
								</rich:columnGroup>
					</rich:dataTable> 
				</a4j:outputPanel>
			</div>
				<div class="field-clear"></div>
			<div class="grid-2-12">
						<a4j:commandButton value="Salvar" action="#{calendarDataModel.storeDayDetails}" id="storebutton"
							oncomplete="#{rich:component('panel')}.hide()"
							reRender="organizer, sample3,pgMensagemCompromisso" />
					</div>
					<div class="grid-2-12">
					<button type="button" id="cancelbutton" onclick="#{rich:component('panel')}.hide()">Cancelar</button>
			</div>
			</h:form>
		</rich:modalPanel>




	</ui:define>
</ui:composition>
